<template>
  <div style="padding: 20px;height: 670px">
    <t-card style="height: 670px">
      <div class="form-step-container">
        <div class="rule-tips">
          <t-alert theme="info" title="警告：" :close="true">
            <div slot="message">
              <p class="span-txt">
                1、XXXXXXXXXXXXXXXXXXX
              </p>
              <p class="span-txt">
                2、XXXXXXXXXXXXXXXXXXX
              </p>
            </div>
          </t-alert>
        </div>
        <t-table
            rowKey="index"
            :data="dataAll"
            :columns="columns"
            :table-layout="tableLayout"
            :align="align"
            max-height="460px"
            bordered
            style="padding-top: 20px"
            stripe=true
        >
          <template #message>
          </template>
          <template #property>
          </template>
          <template #system>
          </template>
          <template #operation="{row}">
            <t-link theme="primary" hover="color" @click="open(row.index)">
              管理
            </t-link>
          </template>
        </t-table>
      </div>

      <t-dialog header="权限管理" :visible.sync="formVisible" :width="680" :footer="false">
        <div slot="body">
          <!-- 表单内容 -->
          <t-form :data="data" @submit="onSubmit(data.index)" :labelWidth="100">
            <t-form-item label="名称" name="name">
              <t-input :style="{ width: '480px' }" v-model="data.name"></t-input>
            </t-form-item>
            <t-form-item label="信息中心" name="message">
              <t-switch size="large" v-model="data.message"></t-switch>
            </t-form-item>
            <t-form-item label="物业管理" name="property">
              <t-switch size="large" v-model="data.property"></t-switch>
            </t-form-item>
            <t-form-item label="系统管理" name="system">
              <t-switch size="large" v-model="data.system"></t-switch>
            </t-form-item>
            <t-form-item style="float: right">
              <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>
              <div style="padding-left: 20px"></div>
              <t-button theme="primary" type="submit">确定</t-button>
            </t-form-item>
          </t-form>
        </div>
      </t-dialog>


    </t-card>
  </div>
</template>
<script lang="jsx">


import axios from "axios";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Role',
  methods: {
    open(index) {
      this.formVisible = true;
      this.data.index = this.dataAll[index].index;
      this.data.name = this.dataAll[index].name;
      this.data.message = this.dataAll[index].message;
      this.data.property = this.dataAll[index].property;
      this.data.system = this.dataAll[index].system;
    },
    onSubmit(index) {
      this.dataAll[index].index = this.data.index
      this.dataAll[index].name = this.data.name
      this.dataAll[index].message = this.data.message
      this.dataAll[index].property = this.data.property
      this.dataAll[index].system = this.data.system
      this.formVisible = false;
    },
    onClickCloseBtn() {
      this.formVisible = false;
      this.data = {}
    },
  },
  data() {
    return {
      formVisible: false,
      tableLayout: true,
      align: true,
      columns: [
        {
          colKey: 'name',
          title: '名称',
          width: 100,
        },
        {
          colKey: 'message',
          title: '信息中心',
          width: 100,
          cell: (h, {row}) => {
            const messageMap = {
              true: {label: '已启用', theme: 'primary'},
              false: {label: '无权限', theme: 'danger'},
            };
            return (
                <t-tag shape="round" theme={messageMap[row.message].theme} variant="light-outline">
                  {messageMap[row.message].label}
                </t-tag>
            );
          }
        },
        {
          colKey: 'property',
          title: '物业管理',
          width: 100,
          cell: (h, {row}) => {
            const propertyMap = {
              true: {label: '已启用', theme: 'primary'},
              false: {label: '无权限', theme: 'danger'},
            };
            return (
                <t-tag shape="round" theme={propertyMap[row.property].theme} variant="light-outline">
                  {propertyMap[row.property].label}
                </t-tag>
            );
          }
        },
        {
          colKey: 'system',
          title: '系统管理',
          width: 100,
          cell: (h, {row}) => {
            const systemMap = {
              true: {label: '已启用', theme: 'primary'},
              false: {label: '无权限', theme: 'danger'},
            };
            return (
                <t-tag shape="round" theme={systemMap[row.system].theme} variant="light-outline">
                  {systemMap[row.system].label}
                </t-tag>
            );
          }
        },
        {
          colKey: 'operation',
          title: '操作',
          width: 100,
        },
      ],
      data: {
        index: '',
        name: '',
        message: '',
        property: '',
        system: '',
      },
      dataAll: [
        {
          index: 0,
          name: '',
          message: false,
          property: false,
          system: false,
        }, {
          index: 1,
          name: '',
          message: false,
          property: false,
          system: false,
        }, {
          index: 2,
          name: '',
          message: false,
          property: false,
          system: false,
        }
      ]
    }
  },
  mounted() {
    axios.get("/api/admin/role/getAll")
        .then(res => {
          if (res.data.code == 200) {
            console.log(res.data.data)
            for (let i = 0; i < res.data.data.length; i++) {
              this.dataAll[i].name = res.data.data[i].roleName
              for (let j = 0; j < res.data.data[i].perms.length; j++) {
                if (res.data.data[i].perms[j].permId == 1) {
                  this.dataAll[i].message = true
                }
                if (res.data.data[i].perms[j].permId == 2) {
                  this.dataAll[i].property = true
                }
                if (res.data.data[i].perms[j].permId == 3) {
                  this.dataAll[i].system = true
                }
              }
            }
          }
        });
  },
};
</script>
<style scoped lang="less">
.list-card-operation {
  display: flex;
  justify-content: space-between;

  .search-input {
    width: 360px;
  }
}

.list-card-items {
  margin: 14px 0 24px 0;
}
</style>